//导入自己的css
require('../css/course_training.css');

// 调用公共底部
common.footer(1);


window.onload = function(){

    // 获取需要的dom
    let newCourseName = document.querySelector('main .new h4')
    let newCourseDes = document.querySelector('main .new p')
    let newCoursePic = document.querySelector('main .new .pic')
    let BASE_URL = 'http://139.9.177.51:8099';
    let main = document.querySelector('main')
    let ul = document.querySelector('main .course ul')
    let userId = localStorage.getItem('userId')
    // 调接口
    // let courseId
    http.get('/sports/courseList',{'id':userId},function(res){
        console.log(res.data);  
        let courseList = res.data;

        // 最新课程内容渲染
        newCourseName.textContent = courseList[0].name;
        newCourseDes.textContent = courseList[0].desc;
        let img = document.createElement('img')
        img.src = BASE_URL+courseList[0].imgurl;
        img.setAttribute('courseId',courseList[0].courseId);
        newCoursePic.appendChild(img);


        
        // 遍历生成多个li标签
        let lis = '';
        for(let i = 1; i < courseList.length; i++){
            lis += `
                <li>
                    <img src=${BASE_URL+courseList[i].imgurl} courseId=${courseList[i].courseId}>
                    <h4>${courseList[i].name}
                        <p>${courseList[i].desc}</p>
                    </h4>
                </li>
           `
        }
        ul.innerHTML = lis;
    })


    // 给每个图片添加点击事件  （这里用事件委派有小bug，可以换成循环给每个li添加点击事件）
    main.addEventListener('click',function(e){
        // console.log(e.target);
        if(e.target.nodeName == 'IMG'){
            let courseId = e.target.getAttribute('courseId');
            localStorage.setItem('courseId',courseId);
            location.href = './course_introduction.html'
        }
    })






}